<template>
  <a-space :size="100" direction="vertical" style="width: 100%">
    <a-layout>
      <a-layout-header :style="headerStyle">头部</a-layout-header>
      <a-layout-content :style="contentStyle">身体</a-layout-content>
      <a-layout-footer :style="footerStyle">脚部</a-layout-footer>
    </a-layout>

    <a-layout>
      <a-layout-header :style="headerStyle">头部</a-layout-header>
      <a-layout>
        <a-layout-sider :style="siderStyle">菜单</a-layout-sider>
        <a-layout-content :style="contentStyle">内容</a-layout-content>
      </a-layout>
      <a-layout-footer :style="footerStyle">脚部</a-layout-footer>
    </a-layout>
  </a-space>
</template>
<script setup>
const headerStyle = {
  textAlign: "center",
  color: "#fff",
  height: 64,
  paddingInline: 50,
  lineHeight: "64px",
  backgroundColor: "#7dbcea",
};
const contentStyle = {
  textAlign: "center",
  minHeight: 120,
  lineHeight: "120px",
  color: "#fff",
  backgroundColor: "#108ee9",
};
const siderStyle = {
  textAlign: "center",
  lineHeight: "120px",
  color: "#fff",
  backgroundColor: "#3ba0e9",
};
const footerStyle = {
  textAlign: "center",
  color: "#fff",
  backgroundColor: "#7dbcea",
};
</script>
<style></style>
